<!--宠物信息-->
<template>
  <div class="row">
    <div class="container">
      <el-form :inline="true"  class="demo-form-inline"
               :style="{marginTop: '20px',float: 'left'}">
        <el-form-item>
          <el-select style="width: 110px" @change="getUserPet" filterable="" v-model="requestData.requestData.user_id" placeholder="主人昵称">
            <el-option
              v-for="item in optionsUserId"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select style="width: 110px" v-model="requestData.requestData.pet_id" placeholder="宠物名称">
            <el-option
              v-for="item in initSelect.pet_id"
              :key="`pet` + item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="requestData.requestData.allTime"
            type="datetimerange"
            range-separator="至"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
          <el-button type="primary" @click="addVisible">新增</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="list"
        stripe
        border
        size="mini"
        style="width: 100%;margin-top: 10px">
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="100">
        </el-table-column>

        <el-table-column
          prop="tbOwner.name"
          label="主人昵称"
          align="center"
        >
        </el-table-column>

        <el-table-column
          prop="tbPetInfo.name"
          label="宠物昵称"
          align="center"
        >
        </el-table-column>

        <el-table-column
          prop="type"
          label="医疗类型"
          align="center"
          :formatter="dataFormatter"
        >
        </el-table-column>

        <el-table-column
          prop="medical_records"
          label="医疗记录"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="matters_needing_attention"
          label="注意事项"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="diagnostic_results"
          label="诊断结果"
          align="center"
        >
        </el-table-column>

        <el-table-column
          prop="create_user"
          align="center"
          label="创建人">
        </el-table-column>
        <el-table-column
          prop="create_date"
          align="center"
          label="创建时间">
        </el-table-column>
        <el-table-column
          prop="update_date"
          align="center"
          label="修改时间">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="200">
          <template slot-scope="scope">
            <el-button size="mini" @click="editParam(scope.row)" type="warning">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleteParam(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>


      <!--信息修改-->
      <el-dialog style="text-align: left" :title="addOrUpdate == 1 ? `宠物信息新增` : `宠物信息修改`" top="5vh"
                 :visible.sync="outerVisible">

        <el-form ref="form" :model="addParam" label-width="120px" style="margin-top: 30px">
          <el-form-item label="宠物主人">
            <el-select @change="getUserPet" filterable="" v-model="addParam.user_id" placeholder="请选择">
              <el-option
                v-for="item in optionsUserId"
                :key="`user` + item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="宠物名称">
            <el-select v-model="addParam.pet_id" placeholder="请选择">
              <el-option
                v-for="item in initSelect.pet_id"
                :key="`pet` + item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="治疗类型">
            <el-select v-model="addParam.type" placeholder="请选择">
              <el-option
                v-for="item in initSelect.type"
                :key="`type` + item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="医疗记录">
            <el-input type="textarea" v-model="addParam.medical_records"></el-input>
          </el-form-item>

          <el-form-item label="注意事项">
            <el-input type="textarea" v-model="addParam.matters_needing_attention"></el-input>
          </el-form-item>

          <el-form-item label="诊断结果">
            <el-input type="textarea" v-model="addParam.diagnostic_results"></el-input>
          </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="editSubmit">提交</el-button>
          <el-button type="info" @click="outerVisible = false">取消</el-button>
        </div>
      </el-dialog>


    </div>
  </div>
</template>

<script>
  export default {
    name: "infoList",
    data() {
      return {
        fileList: {
          pet_code: [],
        },
        list: [],
        total: 0,
        optionsUserId: [],
        outerVisible: false,
        approvalVisible: false,
        editAndDeleteButton: false,
        addOrUpdate: 1,//1增2改
        leaveDts: [],
        initSelect: {
          type: [{label: '疫苗', value: 1}, {label: '治疗', value: 2}],
          pet_id: [],
        },
        requestData: {
          current: 1,
          pageSize: 10,
          requestData: {
            user_id: '',
            pet_id: '',
            allTime:'',
          }
        },
        addParam: {
          pet_id: '',
          user_id: '',
          type: '',
          matters_needing_attention: '',
          diagnostic_results: '',
          medical_records: '',
        },
        labelName: {
          pet_id: '宠物未选择,请选择！',
          user_id: '宠物主人未选择,请选择！',
          type: '治疗类型为空,请选择！',
          matters_needing_attention: '注意事项为空,请输入！',
          diagnostic_results: '诊断结果为空,请输入！',
          medical_records: '医疗记录为空,请输入！',
        },
      }
    },
    created() {
      this.initOptionsUserId()
      this.initButton()
      // this.user = JSON.parse(sessionStorage.getItem("userInfo"))
    },
    mounted() {
      this.initList()
    },
    methods: {

      /**获取当前用户宠物*/
      getUserPet(val) {
        this.initSelect.pet_id = []
        this.service.post('/tbpPetInfo/getDataByUserId'
          , {user_id: val})
          .then(result => {
            let data = result.data.data
            if (data.length < 1) {
              this.$message.warning("当前用户还未维护宠物信息,请选择其他宠物主人！")
              return false;
            }
            for (let i = 0; i < data.length; i++) {
              this.initSelect.pet_id.push({
                value: parseInt(data[i].id),
                label: data[i].name
              })
            }
          })
      },

      /*宠物图片*/
      healthCodeUploadSectionFile(file) {
        this.fileList.pet_code = [];
        // const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg'];
        const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg', 'application/pdf', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/msword'];
        const isJPG = typeArr.indexOf(file.raw.type) !== -1;
        if (!isJPG) {
          this.$message.error('只能word,或者PDF!');
          this.$refs.upload.clearFiles();
          this.files = null;
          return;
        }
        this.files = file.raw;
        // FormData 对象
        let formData = new FormData();
        // 文件对象
        formData.append('file', this.files);
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          methods: 'post'
        }
        this.service.post("/tbowner/fileUpload", formData, config).then(res => {
          this.addParam.picture = res.data.filename
          this.fileList.pet_code.push({
            name: res.data.filename,
            url: this.$a + '/tbowner/images?fileName=' + res.data.filename
          })
        })
      },
      initOptionsUserId() {
        this.service.get('/tbowner/getAll'
          , this.requestData)
          .then(result => {
            this.optionsUserId = []
            this.initSelect.user_id = []
            let data = result.data.data;
            for (let i = 0; i < data.length; i++) {
              this.optionsUserId.push({
                value: parseInt(data[i].id),
                label: data[i].name
              })
              this.initSelect.user_id.push({
                value: data[i].id,
                label: data[i].name
              })
            }
          })
      },
      checkParam() {
        for (let item in this.addParam) {
          if (this.addParam[item].length < 1) {
            return this.labelName[item];
          }
        }
        return null;
      },

      addVisible(status) {
        for (let item in this.addParam) {
          this.addParam[item] = ''
        }
        this.fileList.pet_code = []
        this.addParam.sex = 0
        this.addOrUpdate = 1
        this.outerVisible = true
      },

      add() {
        if (this.checkParam() != null) {
          this.$message.error(this.checkParam());
          return false;
        }

        this.service.post('/tbMedicalTreatment/add'
          , {data: this.addParam})
          .then(result => {
            let data = result.data;
            if (data.code == 500) {
              this.$message.error("请求失败：" + data.data)
            }
            if (data.data > 0) {
              this.$message.success('增加成功')
              for (let item in this.addParam) {
                this.addParam[item] = '';
              }
              for (let item in this.fileList) {
                this.fileList[item] = [];
              }
              this.initList();
              this.outerVisible = false
            } else {
              this.$message.error('增加失败')
            }
          })
      },

      /**公共变量*/
      dataFormatter(row, column) {
        let arrayData = this.initSelect[column.property];
        for (let i = 0; i < arrayData.length; i++) {
          if (arrayData[i].value == row[column.property]) {
            return arrayData[i].label
          }
        }
      },
      editSubmit() {
        if (this.addOrUpdate == 1) {
          this.add()
          return false
        }
        this.service.post('/tbMedicalTreatment/add'
          , {data: this.addParam})
          .then(result => {
            let data = result.data;
            if (data.code == 500) {
              this.$message.error("请求失败：" + data.data)
            }
            if (data.data > 0) {
              this.$message.success('修改成功')
              this.initList();
              this.outerVisible = false;
            } else {
              this.$message.error('修改失败')
            }
          })
      },
      initList() {
        this.service.post('/tbMedicalTreatment/list'
          , this.requestData)
          .then(result => {
            this.list = result.data.data.data;
          })
      },
      editParam(row) {
        this.getUserPet(row.user_id)
        this.addOrUpdate = 2
        this.addParam = JSON.parse(JSON.stringify(row));
        this.outerVisible = true;
      },
      deleteParam(row) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.service.post('/tbMedicalTreatment/del'
            , {data: row.id})
            .then(result => {
              let data = result.data;
              if (data.data > 0) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.initList()
              } else {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                });
              }
            });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      initButton() {
        let userInfo = sessionStorage.getItem("userInfo");
        if (userInfo == undefined || userInfo == null) {
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            type: 'error'
          }).then(() => {
            this.$router.push('/home/login')
          })
          return false;
        }
        let json = JSON.parse(sessionStorage.getItem("userInfo"));
        if (json.role_id == 0) {
          this.editAndDeleteButton = true;
        }
      },
      onSubmit() {
        this.requestData.requestData.start_time = this.requestData.requestData.allTime[0]
        this.requestData.requestData.end_time = this.requestData.requestData.allTime[1]
        this.initList()
      },
      reset() {
        for (let item in this.requestData.requestData) {
          this.requestData.requestData[item] = '';
        }
      },
    }
  }
</script>

<style scoped>

</style>
